<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom Button Component</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.css"
      rel="stylesheet"
    />
    <link href="//unpkg.com/layui@2.9.8/dist/css/layui.css" rel="stylesheet" />
    <style>
      .others {
        width: 90%;
      }
      .asides {
        width: 10%;
      }
      .cardBox {
        display: flex;
        margin: 0 auto;
      }
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .body {
        width: 100vw;
        height: 100vh;
        background-color: #e8e8e8;
      }
      .middle {
        width: 100vw;
        display: flex;
      }
    </style>
  </head>
  <body class="body">
    <div class="box">
      <cjs-card id="card" data="data1"></cjs-card>
      <cjs-card id="card1" data="data2"></cjs-card>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
    <script src="//unpkg.com/layui@2.9.8/dist/layui.js"></script>
    <script src="./api/index.js"></script>
    <script type="module">
      // import { setCjsData } from "./api/index.js";
      console.log(setCjsData);
      let data1 = {
        a: 1,
        n: 1,
        c: 12,
      };
      let data2 = {
        a: 10,
        n: 20,
        c: 30,
      };
      let formData = {
        val: 123,
      };
      // cjs_data.data1 = data1;
      // cjs_data.data2 = data2;
      setCjsData("data1", data1);
      setCjsData("formData", formData);
      setCjsData("data2", data2);
    </script>
  </body>
</html>
